<template>
	<view class="content" :style="{height}">
		<view :class="selectList.some(item=>item.value==v[option.value]) ? 'tag active' : 'tag'"
			@click.stop="isClick&&click(v)" v-for="(v,i) in list" :key="v[option.value]">{{v[option.label]}}</view>
		<view class="f1"></view>
	</view>
</template>

<script>
	export default {
		name: "tags",
		props: {
			list: { // 数据源
				type: Array,
				default: [],
			},
			option: { // 选项配置项
				type: Object,
				default: {
					label: 'label', // 显示内容
					value: 'id' // 绑定内容
				}
			},
			value: { // v-model绑定值
				type: Array,
				default: [],
			},
			isClick: { // 是否可点击
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				height: 'max-content',
				selectList: [],
			}
		},
		watch: {
			value: { // 监听数据变化更新绑定值
				handler(newVal) {
					this.selectList = newVal
				},
				immediate: true,
				deep: true
			},
			list: { // 监听数据变化更新高度
				handler(newVal) {
					if(newVal&&newVal.length){
						this.uploadView()
					}
				},
				immediate:true,
				deep: true
			}
		},
		methods: {
			async uploadView() {
				this.height = 'max-content'
				await this.$nextTick()
				uni.createSelectorQuery().in(this).select('.content').boundingClientRect(({
					height
				}) => {
					// console.log(height);
					this.height = `calc(${height}px - 20rpx)`
				}).exec()
			},
			getVal() {
				return this.selectList
			},
			click(v) {
				// console.log(v);
				if (this.selectList.some(item => item.value == v[this.option.value])) {
					this.selectList = this.selectList.filter(item => item.value != v[this.option.value])
				} else {
					this.selectList = [...this.selectList, v]
				}
				this.$emit('input', this.selectList)
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		overflow: hidden;

		.active {
			color: #fff;
			background-color: var(--co);
		}
	}

	.tag {
		float: left;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		padding: 2rpx 8rpx;
		color: var(--co);
		border: 2rpx solid var(--co);
		border-radius: 4rpx;
		font-size: 24rpx;
		background-color: #fff;
	}
</style>